// 主机状态
<template>
  <div class="main_box my_loading" v-loading.lock="loading">
    <el-row>
      <div class="title" style="display: inline-block; font-size: 16px; padding-top: 15px">主板实时数据</div>
      <el-col :span="24" class="main">
        <el-form ref="form" :model="formMain" label-width="130px" size="small" class="main_up">
          <el-row>
            <el-col :sm="6" :md="6" :lg="6" class="input_width">
              <el-form-item label="电压(V)">
                <el-input v-model="formMain.R_01010001" disabled placeholder="读取中"></el-input>
              </el-form-item>
              <el-form-item label="电流(A)">
                <el-input v-model="formMain.R_01010003" disabled placeholder="读取中"></el-input>
              </el-form-item>
              <el-form-item label="有功功率(Kw)">
                <el-input v-model="formMain.R_01010002" disabled placeholder="读取中"></el-input>
              </el-form-item>
              <el-form-item label="有功总电能(Kwh)">
                <el-input v-model="formMain.R_01010010" disabled placeholder="读取中"></el-input>
              </el-form-item>
              <!-- <el-form-item label="夹角">
                <el-input v-model="formMain.R_01010004" disabled placeholder="读取中"></el-input>
              </el-form-item>-->
              <!-- <el-form-item label="频率(Hz)">
                <el-input v-model="formMain.R_01010005" disabled placeholder="读取中"></el-input>
              </el-form-item>-->
              <el-form-item label="风扇状态">
                <el-switch v-model="formMain.R_fszt" disabled></el-switch>
              </el-form-item>
            </el-col>
            <el-col :sm="6" :md="6" :lg="6" class="input_width">
              <el-form-item label="内部温度(°C)">
                <el-input v-model="formMain.R_01020001" disabled placeholder="读取中"></el-input>
              </el-form-item>
              <el-form-item label="箱体温度(°C)">
                <!-- <el-input v-model="formMain.R_xtwd" disabled placeholder="读取中"></el-input> -->
                <el-input value="" disabled placeholder="读取中"></el-input>
              </el-form-item>
              <el-form-item label="电池电压(V)">
                <el-input v-model="formMain.R_01020002" disabled placeholder="读取中"></el-input>
              </el-form-item>
              <!-- <el-form-item label="交流通道LAN状态">
                {{ formMain.R_01020019 }}
                <div v-for="index of Number(formMain.R_0003000d)" :key="index">
                  <span>
                    {{ index }}
                    {{ formMain.R_01020019[index + 5] === '' }}
                  </span>
                </div>
              </el-form-item> -->
              <el-form-item label="交流通道LAN状态">
                <el-tooltip placement="top" v-for="index of Number(formMain.R_0003000d)" :key="index">
                  <div slot="content" v-text="formMain.R_01020019[index + 5] < 2 ? AcName[`R_000${Acname[index - 1]}0003`] : 'IP使能关闭或无IP'"></div>
                  <span :class="['pie', `active${formMain.R_01020019[index + 5]}`]">
                    <i class="el-icon-loading" v-show="formMain.R_01020019[index + 5] === ''"></i>
                  </span>
                  <!-- <el-button :loading="formMain.R_01020019[index + 5] === ''" :type="btnType[formMain.R_01020019[index + 5]]" icon="" circle></el-button> -->
                </el-tooltip>
              </el-form-item>
              <!-- // active0 绿色   active1 红色  active2灰色 -->
              <el-form-item label="直流通道LAN状态">
                <el-tooltip placement="top" v-for="index of Number(formMain.R_0003000c)" :key="index">
                  <div slot="content" v-text="formMain.R_01020019[index - 1] < 2 ? DcName[`R_000${Dcname[index - 1]}0005`] : 'IP使能关闭或无IP'"></div>
                  <span :class="['pie', `active${formMain.R_01020019[index - 1]}`]">
                    <i class="el-icon-loading" v-if="formMain.R_01020019[index - 1] === ''"></i>
                  </span>
                  <!-- <el-button :loading="formMain.R_01020019[index - 1] === ''" :type="btnType[formMain.R_01020019[index - 1]]" icon="" circle></el-button> -->
                </el-tooltip>
              </el-form-item>
              <el-form-item label="光路状态">
                <el-tooltip placement="top">
                  <div slot="content" v-text="(Number(formMain.R_glzt) === 0 ? '正常' : '异常') + `(${R_00100006})`"></div>
                  <span :class="['pie', `active${formMain.R_glzt}`]">
                    <i class="el-icon-loading" v-show="formMain.R_glzt === ''"></i>
                  </span>
                </el-tooltip>
              </el-form-item>
            </el-col>
            <el-col :sm="6" :md="6" :lg="6" class="input_width" style="height: 400px">
              <div id="myChart" :style="{ height: '100%', width: '100%' }"></div>
            </el-col>
            <el-col :sm="6" :md="6" :lg="6" style="height: 400px">
              <div id="wxslChart" :style="{ height: '100%', width: '100%' }"></div>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <!-- 交流通道 -->
      <el-col :span="12" :class="['list', DcLoad ? 'notAllowed' : '']" v-loading="AcLoad" element-loading-background="transparent">
        <div class="listMain">
          <el-form :inline="true" :model="AcForm" class="header">
            <el-form-item label="交流通道">
              <el-select v-model="AcForm.AcValue" placeholder="请选择" @change="AcChange($event)" clearable @clear="AcClear" :disabled="DcLoad">
                <el-option v-for="item in AcForm.AcOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input v-model="AcForm.AcOnList[Number(AcForm.AcValue)][`R_000${Acname[Number(AcForm.AcValue)]}0003`]" placeholder="通道挂载设备名称" disabled style="width: 300px"></el-input>
            </el-form-item>
          </el-form>
          <el-form :inline="true" :model="AcForm" label-width="80px">
            <el-col :sm="12" :md="12" :lg="12">
              <el-form-item label="合闸记录" class="onAndOffDetails">
                <span class="inlineBlock" style="width: 25px; height: 40px; line-height: 40px; position: absolute; left: 0">最近</span>
                <div class="inlineBlock" style="margin-left: 30px">
                  <el-col :span="8">
                    <el-input v-model.trim="AcForm.AcOnStart" @input="handleInput($event, 'Ac', 'OnStart')" :disabled="DcLoad" />
                    <span style="padding-left: 5px">-</span>
                  </el-col>
                  <el-col :span="8">
                    <el-input v-model.trim="AcForm.AcOnEnd" @input="handleInput($event, 'Ac', 'OnEnd')" :disabled="DcLoad" />
                    <span style="padding-left: 5px">次</span>
                  </el-col>
                  <el-col :span="6">
                    <el-button :disabled="DcLoad" @click="rend('', 'On', 'Ac', AcForm.AcOnStart, AcForm.AcOnEnd)">读取</el-button>
                  </el-col>
                </div>
              </el-form-item>
              <el-form-item label="合闸总次数">
                <el-input placeholder="合闸总次数" disabled v-model="AcForm.AcOnList[Number(AcForm.AcValue)][`R_020000${AcOnNum[Number(AcForm.AcValue)]}`]">
                  <el-button slot="append" @click="rend(`020000${AcOnNum[Number(AcForm.AcValue)]}`, 'On', 'Ac')" :disabled="DcLoad">读取</el-button>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :sm="12" :md="12" :lg="12">
              <el-form-item label="跳闸记录" class="onAndOffDetails">
                <span class="inlineBlock" style="width: 25px; height: 40px; line-height: 40px; position: absolute; left: 0">最近</span>
                <div class="inlineBlock" style="margin-left: 30px">
                  <el-col :span="8">
                    <el-input v-model.trim="AcForm.AcOffStart" @input="handleInput($event, 'Ac', 'OffStart')" :disabled="DcLoad" />
                    <span style="padding-left: 5px">-</span>
                  </el-col>
                  <el-col :span="8">
                    <el-input v-model.trim="AcForm.AcOffEnd" @input="handleInput($event, 'Ac', 'OffEnd')" :disabled="DcLoad" />
                    <span style="padding-left: 5px">次</span>
                  </el-col>
                  <el-col :span="6">
                    <el-button :disabled="DcLoad" @click="rend('', 'Off', 'Ac', AcForm.AcOffStart, AcForm.AcOffEnd)">读取</el-button>
                  </el-col>
                </div>
              </el-form-item>
              <el-form-item label="跳闸总次数">
                <el-input placeholder="跳闸总次数" disabled v-model.trim="AcForm.AcOffList[Number(AcForm.AcValue)][`R_020000${AcOffNum[Number(AcForm.AcValue)]}`]">
                  <el-button slot="append" @click="rend(`020${AcArr[Number(AcForm.AcValue)]}1032`, 'Off', 'Ac')" :disabled="DcLoad">读取</el-button>
                </el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </div>
      </el-col>
      <!-- 直流通道 -->
      <el-col :span="12" :class="['list', AcLoad ? 'notAllowed' : '']" style="margin-right=20px" v-loading="DcLoad" element-loading-background="transparent">
        <div class="listMain">
          <el-form :inline="true" :model="DcForm" class="header">
            <el-form-item label="直流通道">
              <el-select v-model="DcForm.DcValue" placeholder="请选择" @change="DcChange($event)" clearable @clear="DcClear($event)" :disabled="AcLoad">
                <el-option v-for="item in DcForm.DcOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input v-model="DcForm.DcOnList[Number(DcForm.DcValue)][`R_000${Dcname[Number(DcForm.DcValue)]}0005`]" placeholder="通道挂载设备名称" disabled style="width: 300px"></el-input>
            </el-form-item>
          </el-form>
          <el-form :inline="true" :model="DcForm" label-width="80px">
            <el-col :sm="12" :md="12" :lg="12">
              <el-form-item label="电压(V)">
                <el-input v-model="DcForm.DcOnList[Number(DcForm.DcValue)][`R_0102000${DcVoltage[Number(DcForm.DcValue)]}`]" placeholder="电压(V)" disabled></el-input>
              </el-form-item>
              <el-form-item label="合闸记录" class="onAndOffDetails">
                <span class="inlineBlock" style="width: 25px; height: 40px; line-height: 40px; position: absolute; left: 0">最近</span>
                <div class="inlineBlock" style="margin-left: 30px">
                  <el-col :span="8">
                    <el-input v-model="DcForm.DcOnStart" @input="handleInput($event, 'Dc', 'OnStart')" :disabled="AcLoad" />
                    <span style="padding-left: 5px">-</span>
                  </el-col>
                  <el-col :span="8">
                    <el-input v-model="DcForm.DcOnEnd" @input="handleInput($event, 'Dc', 'OnEnd')" :disabled="AcLoad" />
                    <span style="padding-left: 5px">次</span>
                  </el-col>
                  <el-col :span="6">
                    <el-button :disabled="AcLoad" @click="rend('', 'On', 'Dc', DcForm.DcOnStart, DcForm.DcOnEnd)">读取</el-button>
                  </el-col>
                </div>
              </el-form-item>
              <el-form-item label="合闸总次数">
                <el-input placeholder="合闸总次数" disabled v-model="DcForm.DcOnList[Number(DcForm.DcValue)][`R_0200000${DcOnNum[Number(DcForm.DcValue)]}`]">
                  <el-button slot="append" @click="rend(`0200000${DcOnNum[Number(DcForm.DcValue)]}`, 'On', 'Dc')" :disabled="AcLoad">读取</el-button>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :sm="12" :md="12" :lg="12">
              <el-form-item label="电流(mA)">
                <el-input v-model="DcForm.DcOffList[Number(DcForm.DcValue)][`R_0102000${Dccurrent[Number(DcForm.DcValue)]}`]" placeholder="电流(mA)" disabled></el-input>
              </el-form-item>
              <el-form-item label="跳闸记录" class="onAndOffDetails">
                <span class="inlineBlock" style="width: 25px; height: 40px; line-height: 40px; position: absolute; left: 0">最近</span>
                <div class="inlineBlock" style="margin-left: 30px">
                  <el-col :span="8">
                    <el-input v-model="DcForm.DcOffStart" @input="handleInput($event, 'Dc', 'OffStart')" :disabled="AcLoad" />
                    <span style="padding-left: 5px">-</span>
                  </el-col>
                  <el-col :span="8">
                    <el-input v-model="DcForm.DcOffEnd" @input="handleInput($event, 'Dc', 'OffEnd')" :disabled="AcLoad" />
                    <span style="padding-left: 5px">次</span>
                  </el-col>
                  <el-col :span="6">
                    <el-button :disabled="AcLoad" @click="rend('', 'Off', 'Dc', DcForm.DcOffStart, DcForm.DcOffEnd)">读取</el-button>
                  </el-col>
                </div>
              </el-form-item>
              <el-form-item label="跳闸总次数">
                <el-input placeholder="跳闸总次数" disabled v-model="DcForm.DcOffList[Number(DcForm.DcValue)][`R_020000${DcOffNum[Number(DcForm.DcValue)]}`]">
                  <el-button slot="append" @click="rend(`020000${DcOffNum[Number(DcForm.DcValue)]}`, 'Off', 'Dc')" :disabled="AcLoad">读取</el-button>
                </el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="记录" :visible.sync="dialogTableVisible" @close="parentEvent">
      <el-table :data="latelyData" height="300px" v-loading="toggleFlag">
        <el-table-column property="index" label="次数" min-width="150"></el-table-column>
        <el-table-column property="record" :label="`${onOrOff}记录`" min-width="200"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-row>
          <el-col :span="12" align="left">
            <el-pagination
              background
              v-if="rendLatelyList.length > 20"
              @current-change="handleCurrentChange"
              layout="prev, pager, next"
              :page-size="20"
              :total="rendLatelyList.length"
              :current-page="currentPage"
              :disabled="toggleFlag"
            ></el-pagination>
          </el-col>
          <el-col :span="rendLatelyList.length > 20 ? 12 : 24" align="right">
            <el-button type="primary" :disabled="toggleFlag" @click="dialogTableVisible = false">确 定</el-button>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// writeIpAddress
import { getUUID, isJSON, errorTips, overTimeTips, intervalTime, send, sendPing, newSocket } from '@/utils/websocket'
import { writeName, writeRecord, initCharts, initWxsl, getZbMessage, setOptions, rendLately, tdChange } from '@/assets/js/main'
// import { zhuJiUrl } from '../../utils/allUrl'
var nameList = null
export default {
  data() {
    return {
      socket: '',
      setIntervalWesocketPush: null,
      dialogStstusVisible: false, // 修改弹出窗
      listStatus: [], // 修改项数组
      AcLoad: false,
      DcLoad: false,
      orgOptions: {},
      currentPage: 1,
      formMain: {
        // 主板实时数据
        R_01010001: '', // 电压
        R_01010003: '', // 电流
        R_01010002: '', // 功率
        // R_01010004: '', // 夹角
        // R_01010005: '', // 频率
        R_01010010: '', // 有功总电能
        R_01020001: '', // 内部温度
        R_xtwd: '', // 箱体温度
        R_01020002: '', // 电池电压
        R_0003000c: 0, // 直流总数
        R_0003000d: 0, // 交流总数
        R_01020019: ['', '', '', '', '', '', '', '', '', ''], // 直流通道LAN状态/交流通道LAN状态
        R_fszt: false, // 风扇状态
        R_01050001: 1, // RSSI信号强度
        R_00020003: '', // 内部风扇启动温度
        R_00020024: '', // 风扇停止温度差值
        R_01040001: '', // 卫星数量
        R_glzt: '', // 光路状态
      },
      wxsl: '',
      Acname: ['b', 'c', 'd', 'e'], // 交流通道绑定设备名称
      AcArr: [7, 8, 9, 'a'], // 合闸和跳闸记录
      AcOnNum: ['0d', '0f', '11', '13'], // 合闸次数
      AcOffNum: ['0e', '10', '12', '13'], // 跳闸次数
      AcForm: {
        AcValue: '',
        AcOptions: [],
        AcOnList: [
          // 交流合闸记录
          {
            R_000b0003: '', //  设备名称
            R_0200000d: '', // 合闸次数
          },
          {
            R_000c0003: '', //  设备名称
            R_0200000f: '', // 合闸次数
          },
          {
            R_000d0003: '', //  设备名称
            R_02000011: '', // 合闸次数
          },
          {
            R_000e0003: '', //  设备名称
            R_02000013: '', // 合闸次数
          },
        ],
        AcOnStart: '', // 最近5跳合闸
        AcOnEnd: '',
        AcOffStart: '',
        AcOffEnd: '',
        AcOffList: [{ R_0200000e: '' }, { R_02000010: '' }, { R_02000012: '' }, { R_02000014: '' }], // 交流跳闸记录-跳闸次数
      },
      Dcname: [5, 6, 7, 8, 9, 'a'], // 直流通道绑定设备名称
      DcArr: [1, 2, 3, 4, 5, 6], // 跳合闸记录
      DcOnNum: ['1', '3', '5', '7', '9', 'b'], // 合闸次数
      DcOffNum: ['02', '04', '06', '08', '0a', '0c'], // 跳闸次数
      DcVoltage: [3, 5, 7, 9, 'b', 'd'], // 电压
      Dccurrent: [4, 6, 8, 'a', 'c', 'e'], // 电流
      DcForm: {
        DcValue: '',
        DcOptions: [],
        DcOnStart: '', // 最近5跳合闸
        DcOnEnd: '',
        DcOffStart: '',
        DcOffEnd: '',
        DcOnList: [
          // 直流合闸记录
          {
            R_00050005: '', // 设备名称
            R_01020003: '', // 电压1
            R_02010001: '', // 上1次合闸记录
            R_02010032: '', // 上50次合闸记录
            R_02000001: '', // 合闸次数
          },
          {
            R_00060005: '', //  设备名称
            R_01020005: '', // 电压2
            R_02020001: '', // 上 1次合闸记录
            R_02020032: '', // 上50次合闸记录
            R_02000003: '', // 合闸次数
          },
          {
            R_00070005: '', //  设备名称
            R_01020007: '', // 电压3
            R_02030001: '', // 上 1次合闸记录
            R_02030032: '', // 上50次合闸记录
            R_02000005: '', // 合闸次数
          },
          {
            R_00080005: '', //  设备名称
            R_01020009: '', // 电压4
            R_02040001: '', // 上 1次合闸记录
            R_02040032: '', // 上50次合闸记录
            R_02000007: '', // 合闸次数
          },
          {
            R_00090005: '', //  设备名称
            R_0102000b: '', // 电压5
            R_02050001: '', // 上 1次合闸记录
            R_02050032: '', // 上50次合闸记录
            R_02000009: '', // 合闸次数
          },
          {
            R_000a0005: '', //  设备名称
            R_0102000d: '', // 电压6
            R_02060001: '', // 上 1次合闸记录
            R_02060032: '', // 上50次合闸记录
            R_0200000b: '', // 合闸次数
          },
        ],
        DcOffList: [
          // 直流跳闸记录
          {
            R_01020004: '', // 电流1
            R_02011001: '', // 上1次跳闸记录
            R_02011032: '', // 上50次跳闸记录
            R_02000002: '', // 跳闸次数
          },
          {
            R_01020006: '', // 电流2
            R_02021001: '', // 上 1次跳闸记录
            R_02021032: '', // 上50次跳闸记录
            R_02000004: '', // 跳闸次数
          },
          {
            R_01020008: '', // 电流3
            R_02031001: '', // 上 1次跳闸记录
            R_02031032: '', // 上50次跳闸记录
            R_02000006: '', // 跳闸次数
          },
          {
            R_0102000a: '', // 电流4
            R_02041001: '', // 上 1次跳闸记录
            R_02041032: '', // 上50次跳闸记录
            R_02000008: '', // 跳闸次数
          },
          {
            R_0102000c: '', // 电流5
            R_02051001: '', // 上 1次跳闸记录
            R_02051032: '', // 上50次跳闸记录
            R_0200000a: '', // 跳闸次数
          },
          {
            R_0102000e: '', // 电流6
            R_02061001: '', // 上 1次跳闸记录
            R_02061032: '', // 上50次跳闸记录
            R_0200000c: '', // 跳闸次数
          },
        ],
      },
      username: '',
      timerNum: 0,
      // loading: false,
      loading: true,
      acIndex: null, // 交流通道选择框选中项
      dcIndex: null, // 直流通道选择框选中项
      UUID: null,
      myChart: null,
      wxslChart: null, // 卫星数量
      AcLan: { R_000b0001: '', R_000c0001: '', R_000d0001: '', R_000e0001: '' }, // 交流IP使能
      DcLan: { R_00050008: '', R_00060008: '', R_00070008: '', R_00080008: '', R_00090008: '', R_000a0008: '' }, // 直流IP使能
      tdArr: [5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e'],
      AcIp: { R_000b0004: '', R_000c0004: '', R_000d0004: '', R_000e0004: '' }, // 交流IP地址
      DcIp: { R_00050006: '', R_00060006: '', R_00070006: '', R_00080006: '', R_00090006: '', R_000a0006: '' }, // 直流IP地址
      R_00100006: '', // 服务端IP地址
      AcName: { R_000b0003: '', R_000c0003: '', R_000d0003: '', R_000e0003: '' }, // 交流设备名称
      DcName: { R_00050005: '', R_00060005: '', R_00070005: '', R_00080005: '', R_00090005: '', R_000a0005: '' }, // 直流设备名称
      timer: null,
      ifOk: false,
      isNamerOk: false, // 通道名称是否发送成功
      togglePage: true,
      intervalTimer: null,
      rendTimer: null,
      rendLatelyType: false, // 判断是否是跳合闸记录
      dialogTableVisible: false,
      latelyData: [],
      onOrOff: '',
      writeIpEnableList: [],
      acwriteIpEnableList: [],
      dcwriteIpEnableList: [],
      intervalType: true,
      tdTimer: null,
      typeLoad: '',
      rendLatelyFlag: false, // 判断读取最近跳合闸记录的次数超出20的flag
      rendLatelyList: [], // 最近跳合闸大于20保存的数组
      toggleFlag: false,
      loading1: true,
      firstLoad: false,
      secondLoad: false,
      lanList: [],
      tdList: [],
      lanStatus: [],
      btnType: ['success', 'danger', 'info'],
      secondIndex: '',
      AcWriteIpEnable: false,
      DcWriteIpEnable: false,
    }
  },
  watch: {
    togglePage(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.$emit('childFn', newVal)
        if (sessionStorage.getItem('togglePage') !== null) {
          sessionStorage.setItem('togglePage', newVal)
        }
      }
    },
    dialogTableVisible(newVal, oldVal) {
      if (newVal === false) {
      }
    },
  },
  created() {
    sessionStorage.setItem('togglePage', this.togglePage)
    this.UUID = getUUID(32, 16)
    this.username = localStorage.getItem('userName') // 用户登录名
    this.createSocket() // webSocket
    if (this.loading) {
      this.timer = setTimeout(() => {
        this.$message.error(overTimeTips)
        this.togglePage = false
      }, intervalTime)
    } else {
      clearTimeout(this.timer)
    }
    // 获取ip使能和ip地址
    this.lanList = []
    // 交流通道-IP使能
    for (const k in this.AcLan) {
      this.lanList.push({ command_id: k.replace('R_', ''), value: '' })
    }
    // // 交流通道-IP地址
    // for (const k in this.AcIp) {
    //   this.lanList.push({ command_id: k.replace('R_', ''), value: '' })
    // }
    // 直流通道-IP使能
    for (const k in this.DcLan) {
      this.lanList.push({ command_id: k.replace('R_', ''), value: '' })
    }
    // // 直流通道-IP地址
    // for (const k in this.DcIp) {
    //   this.lanList.push({ command_id: k.replace('R_', ''), value: '' })
    // }
    this.initZhuBan('init') // 主板实时数据
  },
  mounted: function () {
    initWxsl(this, '无') // 卫星数量
    initCharts(this, this.formMain.R_01050001)
  },
  methods: {
    // 主板实时数据post请求
    async initZhuBan(type) {
      var reg = /[a-zA-Z℃]*/g
      const SN = localStorage.getItem('SN')
      var lanStatus = []
      // const { data: res } = await this.$http.get(`api/host/selectHostNETStatusBySN?sn=${SN}`)
      const { data: res } = await this.$http.get(`api/host/getHostLastAccept?sn=${SN}&hostType=1`) // 更新于2021-04-01
      if (res.code !== '0000') {
        return
      }
      // if (res) {
      const { voltage, current, power, electricEnergy, temperature, batteryVoltage, nedoStatus, signalIntensity } = res.data
      console.log(res, voltage)
      if (voltage.replace(reg, '')) {
        var dianya = voltage.replace(reg, '') // 电压
      }
      if (current.replace(reg, '')) {
        var dianliu = current.replace(reg, '') // 电流
      }
      if (power.replace(reg, '')) {
        var gonglv = power.replace(reg, '') // 功率
      }
      if (electricEnergy.replace(reg, '')) {
        var dianneng = electricEnergy.replace(reg, '') // 电能
      }
      if (temperature.replace(reg, '')) {
        var nbwd = temperature.replace(reg, '') // 内部温度
        var wd = Number(nbwd)
        var xtwd = (wd + Number(this.randomNum(1.5, 2.5))).toFixed(2)
      }
      if (batteryVoltage.replace(reg, '')) {
        var dldy = batteryVoltage.replace(reg, '') // 电流电压
      }
      this.formMain.R_01010001 = dianya // 电压
      this.formMain.R_01010003 = dianliu // 电流
      this.formMain.R_01010002 = gonglv // 功率
      this.formMain.R_01010010 = dianneng // 有功总电能
      this.formMain.R_01020001 = nbwd // 内部温度
      this.formMain.R_xtwd = xtwd // 箱体温度
      this.formMain.R_01020002 = dldy // 电池电压
      this.formMain.R_01050001 = signalIntensity // 信号强度
      // 判断风扇状态
      var wd3 = this.formMain.R_01020001 // 内部温度
      var wd1 = this.formMain.R_00020003 // 内部风扇启动温度
      var wd2 = this.formMain.R_00020024 // 风扇停止温度差值
      // 内部温度 > 内部风扇启动温度 风扇状态开启
      if (wd3 > wd1) {
        this.formMain.R_fszt = true
      }
      // 内部温度 < 内部风扇启动温度 + 风扇停止温度差值 风扇状态关闭
      if (wd3 < wd1 + wd2) {
        this.formMain.R_fszt = false
      }
      initCharts(this, this.formMain.R_01050001) // RSSI信号强度
      // 判断LAN状态
      var value1 = nedoStatus.trim().split('') // 切割为数组
      var value = value1.reverse() // 翻转LAN状态数组
      lanStatus = value.slice(0, 10) // 1-10(直流-交流)
      this.formMain.R_glzt = value.slice(10, 11)[0] // 存储光路状态
      this.lanStatus = lanStatus // 存储LAN状态
      console.log('状态lanStatus：', this.lanStatus)
      if (type === 'init') {
        return
      }
      this.writeLAN() // 写入LAN状态
      // }
    },
    // 写入LAN状态
    writeLAN() {
      var itemStatus
      var enableNum
      var index
      var arr = ['', '', '', '', '', '', '', '', '', '']
      // 判断交流LAN状态
      for (const item in this.AcLan) {
        index = parseInt(item[5], 16)
        if (index > 10) {
          enableNum = index - 5
        }
        // 判断IP使能 关:0(灰色2) 开:1(判断主板实时数据 lanStatus)
        if (this.AcLan[item] === 0) {
          itemStatus = 2 // 状态灰色
        } else {
          // 开:1(判断主板实时数据 lanStatus)
          if (Number(this.lanStatus[enableNum]) === 0) {
            itemStatus = 0 // 状态绿色
          } else {
            itemStatus = 1 // 状态红色
          }
        }
        arr[enableNum] = itemStatus
      }
      // 判断直流LAN状态
      for (const item in this.DcLan) {
        index = parseInt(item[5], 16)
        if (index < 11) {
          enableNum = index - 5
        }
        // 判断IP使能 关:0(灰色2) 开:1(判断主板实时数据 lanStatus)
        if (this.DcLan[item] === 0) {
          itemStatus = 2 // 状态灰色
        } else {
          // 开:1(判断主板实时数据 lanStatus)
          if (Number(this.lanStatus[enableNum]) === 0) {
            itemStatus = 0 // 状态绿色
          } else {
            itemStatus = 1 // 状态红色
          }
        }
        arr[enableNum] = itemStatus
      }
      this.formMain.R_01020019 = arr
      console.log('主板实时数据-----', this.formMain.R_01020019)
    },
    writeIpEnable(type, id, content, list) {
      for (const item in this[`${type}Lan`]) {
        if (item === `R_${id}`) {
          var value = Number(content)
          this[`${type}Lan`][item] = value
        }
      }
      this[`${type}WriteIpEnable`] = true
    },
    randomNum(m, n) {
      return (Math.random() * (n - m) + m).toFixed(1)
    },
    // 建立websocket连接
    createSocket() {
      // // 在main.js或需要使用的地方引入并建立连接
      this.socket && this.socket.close()
      if (!this.socket) {
        console.log('建立websocket连接')
        this.socket = new WebSocket(newSocket(this.username, this.UUID))
        this.socket.onopen = this.open
        this.socket.onmessage = this.getMessage
        this.socket.onerror = this.onerror
        this.socket.onclose = this.onclose
      } else {
        console.log('websocket已连接')
      }
    },
    // 监听socket连接
    open() {
      this.getFirstId() // 第一包数据
      sendPing(this) // 发送心跳
    },
    // send第一次数据 第一包数据
    getFirstId() {
      // 发送id 获取数据 直流数量 0003000c  交流数量 0003000d
      const list = [
        {
          command_id: '0003000c',
          value: '',
        },
        {
          command_id: '0003000d',
          value: '',
        },
        {
          // 内部风扇启动温度
          command_id: '00020003',
          value: '',
        },
        {
          // 风扇停止温度差值
          command_id: '00020024',
          value: '',
        },
        {
          // 卫星数量
          command_id: '01040001',
          value: '',
        },
        {
          // 服务端IP地址
          command_id: '00100006',
          value: '',
        },
      ]
      for (const k in this.AcName) {
        // 交流通道名字
        list.push({ command_id: k.replace('R_', ''), value: '' })
      }
      for (const k in this.DcName) {
        // 直流通道名字
        list.push({ command_id: k.replace('R_', ''), value: '' })
      }
      send(this, '01', list)
      this.firstLoad = true
      // this.socket.send(`subscriptions-${this.username + this.UUID}-${localStorage.getItem('SN')}`)
      this.socket.send(`subscriptions-${this.username}-${localStorage.getItem('SN')}`)
    },
    getMessage(msg) {
      switch (isJSON(msg.data)) {
        case false: // 主板实时数据
          var data = msg.data
          var lanSN = data.split('-LAN:')[0] // 更新于2021-04-01 -LAN :中间空格去掉 -LAN:
          var iotSN = data.split('-IoT:')[0] // 更新于2021-04-01 -IoT :中间空格去掉 -IoT:
          // 判断SN号是否一致
          // console.log(localStorage.getItem('SN') === lanSN || localStorage.getItem('SN') === iotSN)
          if (localStorage.getItem('SN') === lanSN || localStorage.getItem('SN') === iotSN) {
            // 获取主板实时数据
            getZbMessage(this, data)
          }
          break
        case true:
          // 接收到消息回复ok
          var SN = localStorage.getItem('SN')
          this.socket.send(`TILL${SN}OK`)
          var res = JSON.parse(msg.data)
          switch (Number(res.doing)) {
            case 1: // 读取数据
              this.intervalType = true
              console.log('主板状态-接收到数据：', res)
              if (res.host_status !== '0000') {
                if (res.list[0].command_id !== '01040001') {
                  // errorTips(res.host_status)
                  errorTips(res.host_status, res.tips)
                }
                this.loading = false
                this.AcLoad = false
                this.DcLoad = false
                this.toggleFlag = false
                this.latelyData = []
                clearTimeout(this.timer)
                clearInterval(this.intervalTimer)
                clearInterval(this.rendTimer)
                return
              }
              if (!this.rendLatelyType) {
                this.ifOk = true
              }
              var latelyList = [] // 读取跳合闸记录列表
              if (res.list instanceof Array) {
                for (let i = 0; i < res.list.length; i++) {
                  var id = res.list[i].command_id.toLowerCase()
                  var content = res.list[i].value
                  // 获取通道数量 start
                  // 获取直流数量
                  if (id === '0003000c') {
                    if (Number(content)) {
                      // 判断是否是数字
                      this.formMain[`R_${id}`] = Number(content)
                    }
                    if (Number(content) > 0) {
                      setOptions(this, Number(content), '直流通道', 'Dc') // 直流通道select数据
                    }
                  }
                  // 获取交流数量
                  if (id === '0003000d') {
                    if (Number(content)) {
                      // 判断是否是数字
                      this.formMain[`R_${id}`] = Number(content)
                    }
                    if (Number(content) > 0) {
                      setOptions(this, Number(content), '交流通道', 'Ac') // 交流通道select数据
                    }
                  }
                  // 00020003内部风扇启动温度 00020024风扇停止温度差值
                  if (id === '00020003' || id === '00020024') {
                    this.formMain[`R_${id}`] = content.replace(/[^\d.]/g, '')
                  }
                  // 卫星数量
                  if (id === '01040001') {
                    this.formMain[`R_${id}`] = content.split(',')[7]
                    if (this.formMain[`R_${id}`] > 0) {
                      initWxsl(this, this.formMain.R_01040001) // 卫星数量
                    }
                  }
                  // 获取通道数量 end
                  // 服务端IP地址
                  if (id === '00100006') {
                    this[`R_${id}`] = content
                  }
                  // 选择交流通道数据
                  // 交流通道跳合闸 记录
                  writeRecord(this, 'Ac', id, content)
                  // 直流通道跳合闸记录
                  writeRecord(this, 'Dc', id, content)
                  // 交流通道-判断IP使能是否开启，开(1)：判断IP地址；关(0)：灰色
                  this.writeIpEnable('Ac', id, content, this.acwriteIpEnableList)
                  // 直流通道-判断IP使能是否开启，开：判断IP地址；关：灰色
                  this.writeIpEnable('Dc', id, content, this.dcwriteIpEnableList)
                  // // 交流通道-IP地址写入
                  // writeIpAddress(this, 'Ac', id, content)
                  // // 直流通道-IP地址写入
                  // writeIpAddress(this, 'Dc', id, content)
                  // 交流通道-设备名称
                  writeName(this, 'Ac', id, content)
                  // 直流通道-设备名称
                  writeName(this, 'Dc', id, content)
                  // 跳合闸记录
                  if (this.rendLatelyType === true) {
                    latelyList = res.list
                  }
                }
                if (nameList === null) {
                  nameList = []
                  nameList.push(this.AcName)
                  nameList.push(this.DcName)
                }
              }
              // 设置主板实时数据交流/直流通道LAN状态
              if (this.secondIndex === 2 && this.AcWriteIpEnable && this.DcWriteIpEnable) {
                this.writeLAN()
                this.secondIndex = ''
                this.AcWriteIpEnable = false
                this.DcWriteIpEnable = false
                console.log('设置主板实时数据交流/直流通道LAN状态', this.formMain.R_01020019)
              }
              // 第一次数据请求成功-清除loading
              if (this.firstLoad) {
                this.loading = false
                this.firstLoad = false
                this.secondLoad = true
              }
              // 第一次完成时候请求第二次数据 - ip地址和ip使能
              if (this.secondLoad) {
                if (this.lanList.length > 0) {
                  send(this, '01', this.lanList)
                }
                this.ifOk = false
                this.secondLoad = false
                this.secondIndex = 2
              }
              // 写入跳合闸记录
              if (latelyList.length > 0 && this.dialogTableVisible) {
                console.log('jinlail')
                if (res.host_status !== '0000') {
                  return
                }
                this.latelyData = []
                latelyList.forEach((item) => {
                  var record = item.value
                  // if (item.status !== '0001') { // 更新于2021-03-01(直接使用value)
                  //   // record = listTips(item.status)
                  //   // record = listTips(item.remarks)
                  //   record = listTips(item.value)
                  //   console.log(record)
                  // }
                  const index = item.command_id.substring(item.command_id.length - 2, item.command_id.length)
                  this.latelyData.push({
                    index: parseInt(index, 16),
                    record: record,
                  })
                  this.toggleFlag = false
                  clearTimeout(this.rendTimer)
                  this.ifOk = true
                })
                // this.dialogTableVisible = true
              }
              this.togglePage = false
              this.rendLatelyType = false
              if (this.typeLoad !== '') {
                this[`${this.typeLoad}Load`] = false
                clearInterval(this.rendTimer)
                this.typeLoad = ''
              }
              clearTimeout(this.timer)
              break
            case 2: // 写入数据
              console.log('02主机状态', res)
              break
            default:
          }
          break
        default:
          break
      }
    },
    // toggleFlag为true不能切换
    parentEvent() {
      if (this.toggleFlag) {
        return
      }
      this.latelyData = []
      this.dialogTableVisible = false
      this.ifOk = true
      this.rendLatelyType = false
    },
    // 页数切换
    handleCurrentChange(val) {
      clearTimeout(this.rendTimer)
      this.ifOk = false
      clearInterval(this.intervalTimer)
      this.rendLatelyType = true
      const index = val - 1
      const list = this.rendLatelyList.slice(index * 20, index * 20 + 20)
      // 发送数据-判断是否需要重新连接
      send(this, '01', list)
      this.toggleFlag = true
      this.currentPage = val
      if (this.toggleFlag) {
        this.rendTimer = setTimeout(() => {
          this.$message.error(overTimeTips)
          this.toggleFlag = false
          this.rendLatelyType = false
          this.ifOk = true
          this.latelyData = []
        }, intervalTime)
      }
    },
    // 交流通道select change事件
    AcChange: function (event) {
      this.tdList = [] // 先清除
      // 合闸记录
      this.AcForm.AcOnStart = ''
      this.AcForm.AcOnEnd = ''
      // 合闸总次数
      this.AcForm.AcOnList[Number(this.AcForm.AcValue)][`R_020000${this.AcOnNum[Number(this.AcForm.AcValue)]}`] = ''
      // 跳闸记录
      this.AcForm.AcOffStart = ''
      this.AcForm.AcOffEnd = ''
      // 跳闸总次数
      this.AcForm.AcOffList[Number(this.AcForm.AcValue)][`R_020000${this.AcOffNum[Number(this.AcForm.AcValue)]}`] = ''
      // 通道名称
      this.AcForm.AcOnList[Number(this.AcForm.AcValue)][`R_000${this.Acname[Number(this.AcForm.AcValue)]}0003`] = ''

      tdChange(event, this, 'Ac')
    },
    // 直流通道select change事件
    DcChange: function (event) {
      this.tdList = [] // 先清除
      // 电压
      this.DcForm.DcOnList[Number(this.DcForm.DcValue)][`R_0102000${this.DcVoltage[Number(this.DcForm.DcValue)]}`] = ''
      // 电流
      this.DcForm.DcOffList[Number(this.DcForm.DcValue)][`R_0102000${this.Dccurrent[Number(this.DcForm.DcValue)]}`] = ''
      // 合闸记录
      this.DcForm.DcOnStart = ''
      this.DcForm.DcOnEnd = ''
      // 合闸总次数
      this.DcForm.DcOnList[Number(this.DcForm.DcValue)][`R_0200000${this.DcOnNum[Number(this.DcForm.DcValue)]}`] = ''
      // 跳闸记录
      this.DcForm.DcOffStart = ''
      this.DcForm.DcOffEnd = ''
      // 跳闸总次数
      this.DcForm.DcOffList[Number(this.DcForm.DcValue)][`R_020000${this.DcOffNum[Number(this.DcForm.DcValue)]}`] = ''
      // 通道名称
      this.DcForm.DcOnList[Number(this.DcForm.DcValue)][`R_000${this.Dcname[Number(this.DcForm.DcValue)]}0005`] = ''
      tdChange(event, this, 'Dc')
    },
    // 读取按钮触发事件
    rend(id, gateType, type, start, end) {
      // gateType  on 合闸  off 跳闸
      if (this.AcForm.AcValue === '' && type === 'Ac') {
        this.$message.warning('请选择交流通道')
        return
      }
      if (this.DcForm.DcValue === '' && type === 'Dc') {
        this.$message.warning('请选择直流通道')
        return
      }
      if (id === '') {
        if (start === '' || end === '') {
          this.$message.warning('请输入要查询的次数')
          return
        }
        if (Number(start) > Number(end)) {
          this[`${type}Form`][`${type}${gateType}Start`] = end
          this[`${type}Form`][`${type}${gateType}End`] = start
        }
      }
      clearTimeout(this.rendTimer)
      switch (gateType) {
        case 'On':
          this.onOrOff = '合闸'
          break
        default:
          this.onOrOff = '跳闸'
      }
      this.typeLoad = type
      this.ifOk = false
      clearInterval(this.intervalTimer) // 清除获取卫星数量定时器
      this[`${type}Load`] = true
      let list = []
      if (id === '') {
        list = rendLately(gateType, type, start, end, this)
      } else {
        list = [
          {
            command_id: id,
            value: '',
          },
        ]
      }
      if (list.length > 20) {
        this.rendLatelyList = list
        // 发送数据-判断是否需要重新连接
        send(this, '01', list.slice(0, 20))
        this.rendLatelyFlag = true
      } else {
        // 发送数据-判断是否需要重新连接
        send(this, '01', list)
        this.rendLatelyFlag = false
      }
      if (id === '') {
        this.rendLatelyType = true
        this.dialogTableVisible = true
        this.toggleFlag = true
        this.currentPage = 1
      }
      if (this[`${type}Load`]) {
        this.rendTimer = setTimeout(() => {
          this.$message.error(overTimeTips)
          this[`${type}Load`] = false
          this.rendLatelyType = false
          this.toggleFlag = false
          this.typeLoad = ''
          this.ifOk = true
        }, intervalTime)
      }
    },
    // 交流通道选择框清除数据触发事件
    AcClear() {
      const list1 = this.AcForm.AcOnList[this.acIndex] // 交流通道合闸记录
      const list2 = this.AcForm.AcOffList[this.acIndex] // 交流通道跳闸记录
      for (const k in list1) {
        list1[k] = ''
      }
      for (const k in list2) {
        list2[k] = ''
      }
      this.acIndex = null
    },
    // 直流通道选择框清除数据触发事件
    DcClear(event) {
      const list1 = this.DcForm.DcOnList[this.dcIndex] // 直流通道合闸记录
      const list2 = this.DcForm.DcOffList[this.dcIndex] // 直流通道跳闸记录
      for (const k in list1) {
        list1[k] = ''
      }
      for (const k in list2) {
        list2[k] = ''
      }
      this.dcIndex = null
    },
    // input事件
    handleInput(value, type, switchType) {
      value = value.replace(/[^0-9]/g, '') // 限制只输入数
      if (value > 50) {
        value = 50
      }
      if (value < 1) {
        value = 1
      }
      this[`${type}Form`][`${type}${switchType}`] = value
    },
    onerror(e) {
      this.socket.close()
      clearInterval(this.setIntervalWesocketPush)
      console.log('连接失败')
    },
    onclose(e) {
      clearInterval(this.setIntervalWesocketPush)
      console.log('websocket已断开')
      this.loading = false
      this.$message.error('websocket已断开')
    },
  },
  destroyed: function () {
    // console.log('CLOSE')
    this.socket.send('CLOSE>-<' + this.username) // 关闭页面前发送
    // 销毁监听
    clearInterval(this.setIntervalWesocketPush)
    this.socket.onclose = this.socket.close()
    if (this.myChart) {
      this.myChart.clear()
    }
    if (this.wxslChart) {
      this.wxslChart.clear()
    }
    clearInterval(this.intervalTimer)
    this.loading = false
    clearTimeout(this.timer)
    nameList = null
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/main.scss';
.el-pagination {
  padding: 5px 0;
}
.el-button--small.is-circle {
  box-sizing: border-box;
  height: 15px;
  width: 15px;
  padding: 0;
}
</style>
